<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>TRAJ MOTION DESIGNER</title>
</head>

<body>
	<select id="dimension" onchange="changeDimension()">
		<option>576x320</option>
		<option>320x576</option>
		<option>512x512</option>
	</select>
  <input type="file" id="inputFile" accept="image/*" /><br/>
  Input trajs:<br/>
  <textarea id="traj" style="width:256px;height:128px;" placeholder="points"></textarea><br/>
  <button type="button" onclick="drawtrajs()">Draw Trajs</button><br/>
  <canvas id="canvas" height="320" width="576" style="border:1px dotted gray;"></canvas>
  <br/>
  <a href="draw.html">Traj tool</a>
  <script>
		var inputNode = document.querySelector("#inputFile");
		var imageNode = document.createElement('img');
		// Variables for referencing the canvas and 2dcanvas context
		var canvas,ctx;

		// Variables to keep track of the mouse position and left-button status
		var mouseX,mouseY,moving, mouseDown=0;

		// Variables to keep track of the touch position
		var touchX,touchY;

		var lines = [];
		var userDrawnPixels = [];

		function drawtrajs(){
			ctx.clearRect(0,0,canvas.width,canvas.height);
			ctx.drawImage(imageNode, 0,0,canvas.width,canvas.height, 0, 0, canvas.width, canvas.height);
			ctx.lineCap = "round";
			ctx.lineJoin = "round";
			ctx.lineWidth = 1;
			lines=JSON.parse(document.getElementById('traj').value);
			lines.forEach((line,iline) => {
				var randomColor = Math.floor(Math.random()*16777215).toString(16);
				if((''+randomColor).length<6) randomColor=randomColor+'0';
				console.log(randomColor);
				ctx.fillStyle = '#'+randomColor;
				ctx.strokeStyle = '#'+randomColor;
				ctx.beginPath();
				if(line.length>0&&line[0].length>1){
					line.forEach((pt,ipt)=>{
						if(ipt==0){
							ctx.arc(pt[0] , pt[1], 6, 0, Math.PI*2, true);
							ctx.closePath();
							ctx.fill();
							
							ctx.beginPath();
							ctx.moveTo(pt[0],pt[1]);

						}else{
							ctx.lineTo(pt[0],pt[1]);
						}
					});
				}
				ctx.stroke();
				ctx.closePath();
			});
		}

		// Get the touch position relative to the top-left of the canvas
		// When we get the raw values of pageX and pageY below, they take into account the scrolling on the page
		// but not the position relative to our target div. We'll adjust them using "target.offsetLeft" and
		// "target.offsetTop" to get the correct values in relation to the top left of the canvas.
		function getTouchPos(e) {
				if (!e)
				    var e = event;

				if(e.touches) {
				    if (e.touches.length == 1) { // Only deal with one finger
				        var touch = e.touches[0]; // Get the information for finger #1
				        touchX=touch.pageX-touch.target.offsetLeft;
				        touchY=touch.pageY-touch.target.offsetTop;
				    }
				}
		}

		function newline(){
			if(userDrawnPixels.length==0)return;
			
			userDrawnPixels=[];
			lines.push(userDrawnPixels);
		}

		var inited=false;

		function changeDimension(){
			var x=0,y=0,w=imageNode.width,h=imageNode.height;
			dimension=document.getElementById("dimension").value.split('x');
			canvas.width=dimension[0];
			canvas.height=dimension[1];
			//ctx.drawImage(imageNode, x, y, w, h, 0, 0, w, h);
			if(imageNode.width/imageNode.height>canvas.width/canvas.height){
				y=0;
				h=imageNode.height;
				w=imageNode.height*canvas.width/canvas.height;
				x=(imageNode.width-w)/2;
			}else{
				x=0;
				w=imageNode.width;
				h=imageNode.width*canvas.height/canvas.width;
				y=(imageNode.height-h)/2;
			}
			ctx.drawImage(imageNode, x, y, w, h, 0, 0, canvas.width, canvas.height);
		}

		// Set-up the canvas and add our event handlers after the page has loaded
		function init() {
				// Get the specific canvas element from the HTML document
				canvas = document.getElementById('canvas');

				canvas.focus();

				canvas.width  = 576;
				canvas.height = 320;

				// If the browser supports the canvas tag, get the 2d drawing context for this canvas
				if (canvas.getContext)
				    ctx = canvas.getContext('2d');

				// Check that we have a valid context to draw on/with before adding event handlers
				if (ctx) {
				    // React to mouse events on the canvas, and mouseup on the entire document
				    /*canvas.addEventListener('mousedown', sketchpad_mouseDown, false);
				    canvas.addEventListener('mousemove', sketchpad_mouseMove, false);
				    canvas.addEventListener('mouseup', mouseOrTouchUp, false);

				    // React to touch events on the canvas
				    canvas.addEventListener('touchstart', sketchpad_touchStart, false);
				    canvas.addEventListener('touchmove', sketchpad_touchMove, false);
				    canvas.addEventListener('touchend', mouseOrTouchUp, false);*/

					inputNode.addEventListener(
						"change",
						function (e) {
							var file = e.target.files[0];
							var reader = new FileReader();
							reader.onload = function (e) {
								imageNode.src = e.target.result;
								imageNode.onload = function () {
									inited=true;
									var x=0,y=0,w=this.width,h=this.height;
									dimension=document.getElementById("dimension").value.split('x');
									canvas.width=dimension[0];
									canvas.height=dimension[1];
									//ctx.drawImage(imageNode, x, y, w, h, 0, 0, w, h);
									if(this.width/this.height>canvas.width/canvas.height){
										y=0;
										h=this.height;
										w=this.height*canvas.width/canvas.height;
										x=(this.width-w)/2;
									}else{
										x=0;
										w=this.width;
										h=this.width*canvas.height/canvas.width;
										y=(this.height-h)/2;
									}
									ctx.drawImage(imageNode, x, y, w, h, 0, 0, canvas.width, canvas.height);
					
								};
							};
							file && reader.readAsDataURL(file);
						},
						false
					);
				}
		}

		// Draws a dot at a specific position on the supplied canvas name
		// Parameters are: A canvas context, the x position, the y position, the size of the dot
		function drawLine(ctx, x, y, size) {
				ctx.fillStyle = "lightgrey";
				ctx.beginPath();

				var n = userDrawnPixels.length;
				var point = userDrawnPixels[n-1];

				if ((n>1)) {// && moving
				    var prevPoint = userDrawnPixels[n-2];
				    ctx.moveTo(prevPoint[0],prevPoint[1]);
				    ctx.lineTo(point[0], point[1]);
				} else {
					drawDot(ctx,point[0], point[1],6);
				    //ctx.moveTo(point[0],point[0]);
				    //ctx.lineTo(point[0], point[1]);
				}

				ctx.lineCap = "round";
				ctx.lineJoin = "round";
				ctx.lineWidth = size;
				ctx.stroke();
				ctx.closePath();
				//ctx.fill();
		}


		function drawDot(ctx, x, y, size) {
				ctx.fillStyle = "lightgrey";

				// Draw a filled circle
				ctx.arc(x, y, size, 0, Math.PI*2, true);
				ctx.closePath();
				ctx.fill();
		}

				// Keep track of the mouse button being pressed and draw a dot at current location
		function sketchpad_mouseDown(e) {
                /*getMousePos(e);
                
				userDrawnPixelsPush([mouseX, mouseY]);
				drawLine(ctx,mouseX,mouseY,6);

				mouseDown=1;*/
		}


		function mouseOrTouchUp(e) {
				//mouseDown=0;
				//moving=0;
                // Update the mouse co-ordinates when moved

                if(!mouseX){
                    getMousePos(e);
                    ctx.beginPath();
				    drawDot(ctx,mouseX,mouseY,6);
                    
                    userDrawnPixelsPush([mouseX, mouseY]);
				    moving=1;
                }else{
                    getMousePos(e);
				// Draw a dot if the mouse button is currently being pressed
				//if (mouseDown==1) {
				    userDrawnPixelsPush([mouseX, mouseY]);
                    //drawDot(ctx,mouseX,mouseY,6);
				    drawLine(ctx,mouseX,mouseY,6);
				    moving=1;
				//}
                }
		}

		function sketchpad_mouseMove(e) {
				/*// Update the mouse co-ordinates when moved
				getMousePos(e);

				// Draw a dot if the mouse button is currently being pressed
				if (mouseDown==1) {
				    drawLine(ctx,mouseX,mouseY,6);
				    userDrawnPixelsPush([mouseX, mouseY]);
				    moving=1;
				}*/
		}

		// Get the current mouse position relative to the top-left of the canvas
		function getMousePos(e) {
				if (!e)
				    var e = event;

				if (e.offsetX) {
				    mouseX = e.offsetX;
				    mouseY = e.offsetY;
				}
				else if (e.layerX) {
				    mouseX = e.layerX;
				    mouseY = e.layerY;
				}
		}

		// Draw something when a touch start is detected
		function sketchpad_touchStart() {
				//getTouchPos();
				/*userDrawnPixelsPush([touchX, touchY]);
				

				// Prevent a scrolling action as a result of this touchmove triggering.
				event.preventDefault();

				moving=1;*/
                /*userDrawnPixelsPush([touchX, touchY]);
				drawLine(ctx,touchX,touchY,6);

				mouseDown=1;*/
                
		}

		function sketchpad_touchMove(e) {
				/*getTouchPos(e);
				userDrawnPixelsPush([touchX, touchY]);
				drawLine(ctx,touchX,touchY,6);

				// Prevent a scrolling action as a result of this touchmove triggering.
				event.preventDefault();*/
		}
        
        function SaveTraj(){
            alert(JSON.stringify(userDrawnPixels));
        }
        
        var userDrawnPixels1024=[];
        function userDrawnPixelsPush(point){
            if(userDrawnPixels.length==0&&point[0]!=null){
                userDrawnPixels.push(point);
                userDrawnPixels1024.push([point[0]*4,point[1]*4]);
            }else{
                if(point[0]!=null&&(userDrawnPixels[userDrawnPixels.length-1][0]!=point[0]||userDrawnPixels[userDrawnPixels.length-1][1]!=point[1])){
                    userDrawnPixels.push(point);
                    userDrawnPixels1024.push([point[0]*4,point[1]*4]);
                }
            }
            
			if(lines.length==0){
				lines[0]=userDrawnPixels;
			}else{
				lines[lines.length-1]=userDrawnPixels;
			}
			
            document.getElementById('traj').value=JSON.stringify(lines);
        }

		init();
	</script>
</body>
</html>